<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('自定义视图分页')" />
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>商品名称：</label>
                                <input type="text" name="name"/>
                            </li>
                            <li>
                                <label>价格区间：</label>
                                <select name="params[priceFlag]">
                                    <option value="">所有</option>
                                    <option value="1">100以下</option>
                                    <option value="2">100~500</option>
                                    <option value="3">500~1000</option>
                                    <option value="4">1000以上</option>
                                </select>
                            </li>
                            <li>
                                商品类型：<select name="type" id="selectType">
                                <option value="">所有</option>
                            </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn-group-sm" id="toolbar" role="group">
                <h3> &nbsp;商品列表（点击卡片查看详情）</h3>
            </div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-page-size="10" 
				       data-show-custom-view="true" data-custom-view="customViewFormatter"
                       data-show-custom-view-button="true">
                </table>
			</div>
		</div>
	</div>
    <!--  卡片	-->
    <template id="profileTemplate">
        <div class="col-sm-3">
            <div class="contact-box" style="height: 360px">
                <a onclick="openInfo(%infoUrl%)">
                    <div>
                        <div class="text-center">
                            <img alt="image" style="height: 160px;width: 700px" class="img- m-t-xs img-responsive" src="%IMAGE%">
                            <div class="m-t-xs font-bold" style="font-size: 16px">%cosName%</div>
                        </div>
                    </div>
                    <div>
                        <address>
                            <strong>类型: </strong>%type%<br>
                            <strong>价格：</strong>%price%<br>
                            <strong>简介: </strong>%introduce%<br>
                        </address>
                    </div>
                    <div class="clearfix"></div>
                 </a>
             </div>
        </div>
    </template>

    <div th:include="include :: footer"></div>
    <th:block th:include="include :: bootstrap-table-custom-view-js" />
    <script th:inline="javascript">
        var prefix = ctx + "admin/cosmetics";
        var datas = [[${@dict.getType('sys_normal_disable')}]];

        $(function() {
            var options = {
                url: prefix + "/listCard",
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showExport: true,
                modalName: "商品",
                columns: [
                {
                    field: 'cosId',
                    title: '商品唯一标识',
                    visible: false
                },
                {
                    field: 'name',
                    title: '商品名称',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                'font-weight': 'bold'
                            }
                        };
                    }
                },
                {
                    field: 'cosType.name',
                    title: '商品种类'
                },
                {
                    field: 'price',
                    title: '商品价格',
                    formatter: function (value, row, index) {
                        return '￥'+row.price;
                    }
                },
                {
                    field: '',
                    title: '剩余数量',
                    formatter: function (value, row, index) {
                        return row.number+' ('+ row.unit +')';
                    }
                },]
            };
            $.table.init(options);

            //类型下拉框初始化
            let view = $('#selectType');
            $.ajax({
                url:ctx + 'admin/type/listNotPage',
                type:'post',
                dataType:'json',
                success: function(result) {
                    result.rows.map( item => {
                        view.append('<option value="'+ item.typeId +'">'+ item.name +'</option>');
                    });
                }
            });

        });
        
        function customViewFormatter (data) {
            let template = $('#profileTemplate').html()
            let view = ''
            $.each(data, function (i, row) {
              //图片初始化
              let imgUrl = "/img/bike.png";
              if (row.image != null){
                  imgUrl = row.image;
              }
              //价格初始化
              let price = '';
              if(row.price!=null){
                  price = '￥'+row.price;
              }
              view += template
                .replace('%infoUrl%', row.cosId)
                .replace('%IMAGE%', imgUrl)
                .replace('%cosName%', row.name)
                .replace('%type%', row.cosType.name)
                .replace('%price%', price)
                .replace('%introduce%', row.introduce)
            })
            return `<div class="row mx-0">${view}</div>`
          }

        //打开详情页面
        function openInfo(cosId){
            var url = prefix + '/cosmeticsInfo/' + cosId;
            $.modal.openTab("详细信息", url);
        }
    </script>
</body>
</html>